<script setup name="aside">
import { ref, reactive, computed } from 'vue'
import AsideList from './AsideList.vue'
import FormDialog from './FormDialog.vue'
import {
  getImageClassList,
  createImageClass,
  updataImageClass,
  deleteImageClass,
} from '@/api/imageClass.js'
import { toast } from '@/composables/util'

// 加载动画
const loading = ref(false)
// 图片分类列表
const list = ref([])
// 选中状态
const activeID = ref(0)
// 当前页码
const currentPage = ref(1)
// 总条数
const total = ref(0)
// 每页条数
const limit = 10
// 弹窗节点
const formDialogRef = ref(null)
// 表单节点
const formRef = ref(null)
// 表单数据
const form = reactive({
  name: '',
  order: 50,
})
//表单校验规则
const rules = {
  name: [{ required: true, message: '图库分类名称不能为空', trigger: 'blur' }],
}
// 新增/修改表示
const editID = ref(0)
// 计算新增/删除
const dialogTitle = computed(() => (editID.value ? '修改图库分类' : '新增图库分类'))

// 获取图库列表
const getData = async (page = null) => {
  if (typeof page === 'number') currentPage.value = page
  loading.value = true
  const res = await getImageClassList(currentPage.value)
  list.value = res.list
  total.value = res.totalCount
  let item = list.value[0]
  if (item) handleChangeActiveId(item.id)
  loading.value = false
}
getData()

// 提交事件
const handleSubmit = () => {
  formRef.value.validate(async validate => {
    if (!validate) return
    // 显示按钮加载
    formDialogRef.value.showLoading()
    // 调用新增
    editID.value ? await updataImageClass(editID.value, form) : await createImageClass(form)
    // 提示成功
    toast(`${dialogTitle.value}成功!`)
    // 新增则刷新第一页，修改刷新对应页
    getData(editID.value ? currentPage.value : 1)
    // 关闭弹窗
    formDialogRef.value.close()
    // 关闭按钮加载
    formDialogRef.value.hideLoading()
  })
}

// 显示弹窗
const CreateDialog = () => {
  // 标记为新增
  editID.value = 0
  if(editID.value) {
    // 初始化表单
    form.name = ''
    form.order = ''
  }
  formDialogRef.value.open()
}

// 修改图库分类名
const handleEdit = row => {
  // 初始化表单
  form.name = row.name
  form.order = row.order
  // 标记为修改
  editID.value = row.id
  // 显示弹窗
  formDialogRef.value.open()
}

// 删除图库分类
const handleDelete = id => {
  loading.value = true
  deleteImageClass(id)
    .then(() => {
      toast('删除图库分类成功')
      getData()
    })
    .finally(() => (loading.value = false))
}

// 切换选中分类
const handleChangeActiveId = id => {
  activeID.value = id
  emit('change', id)
}

// 取消新增
const close = () => {
  formRef.value.clearValidate()
  form.name = ''
  form.order = 0
}

// 提供外部调用内部的方法
const emit = defineEmits(['change'])

// 导出方法
defineExpose({ CreateDialog })
</script>

<template>
  <el-aside v-loading="loading" class="image-aside" width="26.2vw">
    <div class="image-aside-header">
      <AsideList v-for="i in list" :key="i.id" :active="activeID === i.id" @edit="handleEdit(i)" @delete="handleDelete(i.id)" @click="handleChangeActiveId(i.id)">
        {{ i.name }}
      </AsideList>
    </div>
    <div class="image-aside-footer">
      <el-pagination background small layout="prev, next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData" />
    </div>
  </el-aside>
  <FormDialog ref="formDialogRef" :title="dialogTitle" @submit="handleSubmit" @close="close">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name" clearable />
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input-number v-model="form.order" :min="0" :max="1000" />
      </el-form-item>
    </el-form>
  </FormDialog>
</template>

<style lang="scss" scoped>
.image-aside {
  border-right: 1px solid var(--border);
  position: relative;
  &-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
  }
  &-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    height: 50px;
    left: 0;
    right: 0;
  }
}
.el-input-number {
  width: 100%;
}
@media screen and (max-width: 375px), screen and (max-width: 414px) {
  .image-aside {
    width: 120px;
  }
  ::-webkit-scrollbar {
    width: 0;
  }
}
</style>
